<template>
  <div class="grimm-tool-bar-box">
    <div class="grimm-tool-bar">
      <grimm-toolbar-itme
        v-for="(item,index) in currentData"
        :key="index"
        :index="index"
        :barIndex="barIndex"
        :label="item.label"
        :icon="item.icon"
        :onHandler="onClickTab"
        :visibleMore="visibleMore"
        :animation="animation"
      />
      <div class="tool-bar-more" v-if="data && data.length > this.getBarNum() && visibleMore">
        <grimm-toolbar-itme
          v-for="(item,index) in moreData"
          :key="index"
          :index="index"
          :barIndex="moreBarIndex"
          :label="item.label"
          :icon="item.icon"
          :onHandler="onClickMoreTab"
          :animation="animation"
        />
      </div>
      <div
        v-if="data && data.length > this.getBarNum()"
        class="grimm-tool-bar-item"
        @click="onClickMore"
        :class="tagClass"
      >
        <p>...</p>
        <p>更多</p>
      </div>
    </div>
  </div>
</template>
<script>
import GrimmToolbarItme from './toolbar-item';
const name = 'grimm-toolbar';
export default {
  name,
  components: { GrimmToolbarItme },
  data() {
    return {
      barIndex: 0,
      barLable: this.data.length && this.data[0].label,
      moreBarIndex: null,
      visibleMore: false,
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    clickHandler: {
      type: Function,
      default: _ => _,
    },
    barNum: {
      type: [Number, String],
      default: () => 4,
    },
    animation: {
      type: String,
      default: () => '',
    },
  },
  computed: {
    tagClass() {
      if (this.visibleMore) {
        return 'grimm-tool-bar-active';
      }
      return '';
    },
    currentData() {
      return this.data.length > this.getBarNum() ? this.data.slice(0, this.getBarNum()) : this.data;
    },
    moreData() {
      return this.data.length > this.getBarNum()
        ? this.data.slice(this.getBarNum(), this.data.length)
        : [];
    },
  },
  mounted() {},
  methods: {
    onClickTab(label, index) {
      if (this.visibleMore) {
        return;
      }
      this.barIndex = index;
      this.barLable = label;
      this.clickHandler(label, index);
    },
    onClickMoreTab(label, index) {
      this.moreBarIndex = index;
      this.clickHandler(label, index + Number(this.barNum));
    },
    onClickMore() {
      this.visibleMore = !this.visibleMore;
      this.moreBarIndex = null;
      if (!this.visibleMore) {
        this.clickHandler(this.barLable, this.barIndex);
      }
    },
    getBarNum() {
      return Number(this.barNum) || 4;
    },
  },
};
</script>
<style lang="stylus" >
.grimm-tool-bar-box {
  font-family: PingFangSC-Medium;
  font-size: 10px;
  color: #666666;
  letter-spacing: 0;
  width: 100%;
  line-height: 18px;

  .grimm-tool-bar {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
  }

  .tool-bar-more {
    width: 95%;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%, -100%);
    border-radius: 5px;
  }
}
</style>
